<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>学生信息登记表</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

  <!-- 配置Tailwind自定义颜色和字体 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#6366f1', // 靛蓝色作为主色调
            secondary: '#10b981', // 绿色作为辅助色
            accent: '#f472b6', // 粉色作为强调色
            dark: '#1e293b',
            light: '#f8fafc'
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
          animation: {
            'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
          }
        }
      }
    }
  </script>

  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .glass {
        background: rgba(255, 255, 255, 0.25);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.18);
      }
      .glass-dark {
        background: rgba(15, 23, 42, 0.7);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.08);
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      .hover-lift {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }
      .hover-lift:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
      }
    }
  </style>
</head>
<body class="min-h-screen font-sans bg-cover bg-center bg-fixed relative overflow-x-hidden" style="background-image: url('https://picsum.photos/id/307/1920/1080');">
<!-- 背景渐变遮罩 -->
<div class="absolute inset-0 bg-gradient-to-br from-dark/80 to-primary/30 z-0"></div>

<!-- 装饰元素 -->
<div class="absolute top-0 left-0 w-64 h-64 bg-accent/20 rounded-full filter blur-3xl -translate-x-1/2 -translate-y-1/2 animate-pulse-slow"></div>
<div class="absolute bottom-0 right-0 w-96 h-96 bg-primary/20 rounded-full filter blur-3xl translate-x-1/3 translate-y-1/3 animate-pulse-slow" style="animation-delay: 1s;"></div>

<div class="container mx-auto px-4 py-8 max-w-7xl relative z-10">
  <!-- 页面标题 -->
  <header class="mb-8 mt-4">
    <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-white mb-2 text-shadow">
      学生信息登记表
      <span class="inline-block w-12 h-1 bg-accent rounded-full mt-2"></span>
    </h1>
    <p class="text-gray-200 text-lg max-w-2xl">管理学生基本信息，支持新增、编辑和删除操作，界面简洁高效</p>
  </header>

  <!-- 操作按钮区 -->
  <div class="flex flex-wrap items-center justify-between mb-6 gap-4">
    <div class="flex gap-3">
      <button id="addBtn" class="bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary/70 text-white px-5 py-2.5 rounded-lg shadow-lg transition-all flex items-center gap-2 hover-lift">
        <i class="fa fa-plus-circle"></i>
        <span>新增学生</span>
      </button>
      <button id="batchDeleteBtn" class="bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white px-5 py-2.5 rounded-lg shadow-lg transition-all flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
        <i class="fa fa-trash"></i>
        <span>批量删除</span>
      </button>
    </div>

    <div class="relative w-full md:w-64">
      <input type="text" id="searchInput" placeholder="搜索学生..." class="w-full pl-10 pr-4 py-2.5 rounded-lg bg-white/10 border border-white/20 text-white placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-accent/50 transition-all">
      <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-300"></i>
    </div>
  </div>

  <!-- 学生表格 -->
  <div class="glass rounded-2xl overflow-hidden shadow-2xl mb-6 transition-all duration-500 hover:shadow-primary/20">
    <table class="w-full text-left">
      <thead>
      <tr class="border-b border-white/10">
        <th class="px-6 py-4">
          <div class="flex items-center">
            <input type="checkbox" id="selectAll" class="w-4 h-4 rounded border-gray-300 text-accent focus:ring-accent/50">
          </div>
        </th>
        <th class="px-6 py-4 font-semibold text-gray-100">学号</th>
        <th class="px-6 py-4 font-semibold text-gray-100">姓名</th>
        <th class="px-6 py-4 font-semibold text-gray-100">性别</th>
        <th class="px-6 py-4 font-semibold text-gray-100">年龄</th>
        <th class="px-6 py-4 font-semibold text-gray-100">班级</th>
        <th class="px-6 py-4 font-semibold text-gray-100">专业</th>
        <th class="px-6 py-4 font-semibold text-gray-100">操作</th>
      </tr>
      </thead>
      <tbody id="studentTableBody">
      <!-- 表格内容将通过JavaScript动态生成 -->
      </tbody>
    </table>

    <!-- 空状态显示 -->
    <div id="emptyState" class="hidden py-20 text-center">
      <i class="fa fa-graduation-cap text-gray-400 text-6xl mb-4"></i>
      <p class="text-gray-300 text-lg">暂无学生信息</p>
      <button id="addFromEmptyBtn" class="mt-4 text-accent hover:text-accent/80 font-medium transition-colors">
        <i class="fa fa-plus-circle mr-1"></i> 添加学生信息
      </button>
    </div>
  </div>

  <!-- 分页控件 -->
  <div id="pagination" class="glass rounded-xl p-4 flex flex-wrap items-center justify-between gap-4">
    <div class="text-gray-200">
      显示 <span id="startItem">1</span>-<span id="endItem">10</span> 条，共 <span id="totalItems">0</span> 条
    </div>
    <div class="flex items-center gap-2">
      <select id="pageSizeSelect" class="bg-white/10 border border-white/20 text-white rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-accent/50">
        <option value="5">5条/页</option>
        <option value="10" selected>10条/页</option>
        <option value="20">20条/页</option>
        <option value="50">50条/页</option>
      </select>
      <div class="flex items-center gap-1">
        <button id="prevPage" class="w-10 h-10 flex items-center justify-center rounded-lg bg-white/10 border border-white/20 text-gray-200 hover:bg-white/20 transition-colors disabled:opacity-50 disabled:cursor-not-allowed" disabled>
          <i class="fa fa-chevron-left text-sm"></i>
        </button>
        <div id="pageNumbers" class="flex items-center">
          <!-- 页码将通过JavaScript动态生成 -->
        </div>
        <button id="nextPage" class="w-10 h-10 flex items-center justify-center rounded-lg bg-white/10 border border-white/20 text-gray-200 hover:bg-white/20 transition-colors disabled:opacity-50 disabled:cursor-not-allowed" disabled>
          <i class="fa fa-chevron-right text-sm"></i>
        </button>
      </div>
    </div>
  </div>
</div>

<!-- 新增/编辑学生对话框 -->
<div id="studentDialog" class="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 hidden">
  <div class="glass-dark rounded-2xl w-full max-w-md mx-4 transform transition-all duration-300 scale-95 opacity-0" id="dialogContent">
    <div class="p-6 border-b border-white/10">
      <h2 id="dialogTitle" class="text-2xl font-bold text-white">新增学生</h2>
    </div>
    <form id="studentForm" class="p-6 space-y-5">
      <input type="hidden" id="studentId">

      <div>
        <label for="studentNo" class="block text-sm font-medium text-gray-300 mb-1.5">学号 <span class="text-accent">*</span></label>
        <input type="text" id="studentNo" name="studentNo" required class="w-full px-4 py-2.5 rounded-lg bg-white/10 border border-white/20 text-white focus:outline-none focus:ring-2 focus:ring-accent/50 transition-all">
      </div>

      <div>
        <label for="name" class="block text-sm font-medium text-gray-300 mb-1.5">姓名 <span class="text-accent">*</span></label>
        <input type="text" id="name" name="name" required class="w-full px-4 py-2.5 rounded-lg bg-white/10 border border-white/20 text-white focus:outline-none focus:ring-2 focus:ring-accent/50 transition-all">
      </div>

      <div>
        <label class="block text-sm font-medium text-gray-300 mb-1.5">性别 <span class="text-accent">*</span></label>
        <div class="flex gap-4">
          <label class="inline-flex items-center text-gray-200">
            <input type="radio" name="gender" value="男" checked class="w-4 h-4 text-accent focus:ring-accent/50">
            <span class="ml-2">男</span>
          </label>
          <label class="inline-flex items-center text-gray-200">
            <input type="radio" name="gender" value="女" class="w-4 h-4 text-accent focus:ring-accent/50">
            <span class="ml-2">女</span>
          </label>
        </div>
      </div>

      <div>
        <label for="age" class="block text-sm font-medium text-gray-300 mb-1.5">年龄 <span class="text-accent">*</span></label>
        <input type="number" id="age" name="age" min="10" max="30" required class="w-full px-4 py-2.5 rounded-lg bg-white/10 border border-white/20 text-white focus:outline-none focus:ring-2 focus:ring-accent/50 transition-all">
      </div>

      <div>
        <label for="className" class="block text-sm font-medium text-gray-300 mb-1.5">班级 <span class="text-accent">*</span></label>
        <input type="text" id="className" name="className" required class="w-full px-4 py-2.5 rounded-lg bg-white/10 border border-white/20 text-white focus:outline-none focus:ring-2 focus:ring-accent/50 transition-all">
      </div>

      <div>
        <label for="major" class="block text-sm font-medium text-gray-300 mb-1.5">专业 <span class="text-accent">*</span></label>
        <select id="major" name="major" required class="w-full px-4 py-2.5 rounded-lg bg-white/10 border border-white/20 text-white focus:outline-none focus:ring-2 focus:ring-accent/50 transition-all">
          <option value="" class="bg-dark">请选择专业</option>
          <option value="计算机科学与技术" class="bg-dark">计算机科学与技术</option>
          <option value="软件工程" class="bg-dark">软件工程</option>
          <option value="电子信息工程" class="bg-dark">电子信息工程</option>
          <option value="通信工程" class="bg-dark">通信工程</option>
          <option value="自动化" class="bg-dark">自动化</option>
          <option value="人工智能" class="bg-dark">人工智能</option>
          <option value="数据科学与大数据技术" class="bg-dark">数据科学与大数据技术</option>
        </select>
      </div>
    </form>
    <div class="p-4 bg-white/5 rounded-b-2xl flex justify-end gap-3">
      <button id="cancelBtn" class="px-5 py-2.5 border border-white/20 rounded-lg text-gray-200 hover:bg-white/10 transition-colors">取消</button>
      <button id="saveBtn" class="px-5 py-2.5 bg-gradient-to-r from-primary to-primary/80 text-white rounded-lg hover:from-primary/90 hover:to-primary/70 transition-colors">保存</button>
    </div>
  </div>
</div>

<!-- 删除确认对话框 -->
<div id="deleteDialog" class="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 hidden">
  <div class="glass-dark rounded-2xl w-full max-w-md mx-4 transform transition-all duration-300 scale-95 opacity-0" id="deleteDialogContent">
    <div class="p-6 text-center">
      <div class="w-16 h-16 bg-red-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
        <i class="fa fa-exclamation-triangle text-2xl text-red-400"></i>
      </div>
      <h3 class="text-xl font-bold text-white mb-2">确认删除</h3>
      <p class="text-gray-300 mb-6" id="deleteMessage">您确定要删除这条学生信息吗？此操作不可撤销。</p>
      <div class="flex justify-center gap-3">
        <button id="cancelDeleteBtn" class="px-5 py-2.5 border border-white/20 rounded-lg text-gray-200 hover:bg-white/10 transition-colors">取消</button>
        <button id="confirmDeleteBtn" class="px-5 py-2.5 bg-gradient-to-r from-red-500 to-red-600 text-white rounded-lg hover:from-red-600 hover:to-red-700 transition-colors">删除</button>
      </div>
    </div>
  </div>
</div>

<!-- 通知提示 -->
<div id="toast" class="fixed top-4 right-4 px-6 py-3 rounded-lg shadow-xl transform translate-x-full transition-transform duration-300 flex items-center gap-3 z-50">
  <i id="toastIcon" class="fa fa-check-circle text-xl"></i>
  <span id="toastMessage">操作成功</span>
</div>

<script>
  // 学生数据
  let students = [
    { id: 1, studentNo: '2021001', name: '张三', gender: '男', age: 20, className: '计科2101', major: '计算机科学与技术' },
    { id: 2, studentNo: '2021002', name: '李四', gender: '女', age: 19, className: '计科2101', major: '计算机科学与技术' },
    { id: 3, studentNo: '2021003', name: '王五', gender: '男', age: 21, className: '软工2102', major: '软件工程' },
    { id: 4, studentNo: '2021004', name: '赵六', gender: '女', age: 20, className: '电子2101', major: '电子信息工程' },
    { id: 5, studentNo: '2021005', name: '钱七', gender: '男', age: 22, className: '通信2101', major: '通信工程' },
    { id: 6, studentNo: '2021006', name: '孙八', gender: '女', age: 19, className: '自动化2101', major: '自动化' },
    { id: 7, studentNo: '2021007', name: '周九', gender: '男', age: 20, className: '人工智能2101', major: '人工智能' },
    { id: 8, studentNo: '2021008', name: '吴十', gender: '女', age: 21, className: '大数据2101', major: '数据科学与大数据技术' },
    { id: 9, studentNo: '2021009', name: '吴承恩',gender: '男', age: 20, className: '计科2102', major: '计算机科学与技术' },
    { id: 10, studentNo: '2021010', name:'郑润泽', gender: '女', age: 19, className: '软工2101', major: '软件工程' },
    { id: 11, studentNo: '2021011', name: '姜十一', gender: '男', age: 21, className: '电子2102', major: '电子信息工程' },
    { id: 12, studentNo: '2021012', name: '冯三千' ,gender: '女', age: 20, className: '通信2102', major: '通信工程' },
    { id: 13, studentNo: '2021013', name: '陈泽', gender: '男', age: 22, className: '自动化2102', major: '自动化' },
    { id: 14, studentNo: '2021014', name: '褚婷', gender: '女', age: 19, className: '人工智能2102', major: '人工智能' },
    { id: 15, studentNo: '2021015', name: '卫无忌', gender: '男', age: 20, className: '大数据2102', major: '数据科学与大数据技术' }
  ];

  // 当前页、每页数量、选中的学生ID
  let currentPage = 1;
  let pageSize = 10;
  let selectedStudentIds = new Set();
  let searchTerm = '';
  let editingStudentId = null;
  let deletingStudentIds = [];

  // DOM元素
  const studentTableBody = document.getElementById('studentTableBody');
  const emptyState = document.getElementById('emptyState');
  const selectAllCheckbox = document.getElementById('selectAll');
  const batchDeleteBtn = document.getElementById('batchDeleteBtn');
  const studentDialog = document.getElementById('studentDialog');
  const dialogContent = document.getElementById('dialogContent');
  const deleteDialog = document.getElementById('deleteDialog');
  const deleteDialogContent = document.getElementById('deleteDialogContent');
  const toast = document.getElementById('toast');
  const toastIcon = document.getElementById('toastIcon');
  const toastMessage = document.getElementById('toastMessage');

  // 初始化页面
  function init() {
    renderTable();
    setupEventListeners();
  }

  // 设置事件监听器
  function setupEventListeners() {
    // 全选 checkbox
    selectAllCheckbox.addEventListener('change', handleSelectAll);

    // 批量删除按钮
    batchDeleteBtn.addEventListener('click', handleBatchDelete);

    // 新增按钮
    document.getElementById('addBtn').addEventListener('click', openAddDialog);
    document.getElementById('addFromEmptyBtn').addEventListener('click', openAddDialog);

    // 对话框按钮
    document.getElementById('cancelBtn').addEventListener('click', closeDialog);
    document.getElementById('saveBtn').addEventListener('click', saveStudent);

    // 删除对话框按钮
    document.getElementById('cancelDeleteBtn').addEventListener('click', closeDeleteDialog);
    document.getElementById('confirmDeleteBtn').addEventListener('click', confirmDelete);

    // 分页控件
    document.getElementById('prevPage').addEventListener('click', goToPrevPage);
    document.getElementById('nextPage').addEventListener('click', goToNextPage);
    document.getElementById('pageSizeSelect').addEventListener('change', changePageSize);

    // 搜索框
    document.getElementById('searchInput').addEventListener('input', handleSearch);
  }

  // 渲染表格
  function renderTable() {
    // 过滤学生数据
    const filteredStudents = students.filter(student =>
            student.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
            student.studentNo.includes(searchTerm) ||
            student.className.toLowerCase().includes(searchTerm.toLowerCase()) ||
            student.major.toLowerCase().includes(searchTerm.toLowerCase())
    );

    // 计算分页
    const totalItems = filteredStudents.length;
    const totalPages = Math.ceil(totalItems / pageSize);

    // 确保当前页有效
    if (currentPage > totalPages && totalPages > 0) {
      currentPage = totalPages;
    }

    // 计算当前页显示的学生
    const startIndex = (currentPage - 1) * pageSize;
    const endIndex = Math.min(startIndex + pageSize, totalItems);
    const currentStudents = filteredStudents.slice(startIndex, endIndex);

    // 更新表格内容
    studentTableBody.innerHTML = '';

    if (currentStudents.length === 0) {
      studentTableBody.classList.add('hidden');
      emptyState.classList.remove('hidden');
    } else {
      studentTableBody.classList.remove('hidden');
      emptyState.classList.add('hidden');

      currentStudents.forEach(student => {
        const row = document.createElement('tr');
        row.className = 'border-b border-white/5 text-gray-200 hover:bg-white/5 transition-colors';
        row.dataset.id = student.id;

        row.innerHTML = `
                        <td class="px-6 py-4">
                            <input type="checkbox" class="student-select w-4 h-4 rounded border-gray-300 text-accent focus:ring-accent/50"
                                   data-id="${student.id}" ${selectedStudentIds.has(student.id) ? 'checked' : ''}>
                        </td>
                        <td class="px-6 py-4">${student.studentNo}</td>
                        <td class="px-6 py-4 font-medium">${student.name}</td>
                        <td class="px-6 py-4">${student.gender}</td>
                        <td class="px-6 py-4">${student.age}</td>
                        <td class="px-6 py-4">${student.className}</td>
                        <td class="px-6 py-4">${student.major}</td>
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-3">
                                <button class="edit-btn text-primary hover:text-primary/80 p-1.5 transition-colors" data-id="${student.id}" title="编辑">
                                    <i class="fa fa-pencil"></i>
                                </button>
                                <button class="delete-btn text-red-400 hover:text-red-300 p-1.5 transition-colors" data-id="${student.id}" title="删除">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </div>
                        </td>
                    `;

        studentTableBody.appendChild(row);

        // 添加事件监听器
        row.querySelector('.student-select').addEventListener('change', handleStudentSelect);
        row.querySelector('.edit-btn').addEventListener('click', () => openEditDialog(student.id));
        row.querySelector('.delete-btn').addEventListener('click', () => openDeleteDialog([student.id]));
      });
    }

    // 更新分页信息
    document.getElementById('startItem').textContent = totalItems > 0 ? startIndex + 1 : 0;
    document.getElementById('endItem').textContent = endIndex;
    document.getElementById('totalItems').textContent = totalItems;

    // 渲染页码
    renderPageNumbers(totalPages);

    // 更新分页按钮状态
    document.getElementById('prevPage').disabled = currentPage === 1;
    document.getElementById('nextPage').disabled = currentPage === totalPages || totalPages === 0;

    // 更新批量删除按钮状态
    batchDeleteBtn.disabled = selectedStudentIds.size === 0;
  }

  // 渲染页码
  function renderPageNumbers(totalPages) {
    const pageNumbersContainer = document.getElementById('pageNumbers');
    pageNumbersContainer.innerHTML = '';

    // 最多显示5个页码
    let startPage = Math.max(1, currentPage - 2);
    let endPage = Math.min(totalPages, startPage + 4);

    // 调整起始页，确保显示5个页码（除非总页数少于5）
    if (endPage - startPage < 4 && totalPages > 5) {
      startPage = Math.max(1, endPage - 4);
    }

    // 添加第一页按钮（如果不是起始页）
    if (startPage > 1) {
      addPageButton(1);
      if (startPage > 2) {
        addEllipsis();
      }
    }

    // 添加页码按钮
    for (let i = startPage; i <= endPage; i++) {
      addPageButton(i);
    }

    // 添加最后一页按钮（如果不是结束页）
    if (endPage < totalPages) {
      if (endPage < totalPages - 1) {
        addEllipsis();
      }
      addPageButton(totalPages);
    }
  }

  // 添加页码按钮
  function addPageButton(pageNumber) {
    const pageNumbersContainer = document.getElementById('pageNumbers');
    const button = document.createElement('button');
    button.className = `w-10 h-10 flex items-center justify-center rounded-lg transition-all ${
            pageNumber === currentPage
                    ? 'bg-primary text-white shadow-lg shadow-primary/20'
                    : 'bg-white/10 border border-white/20 text-gray-200 hover:bg-white/20'
    }`;
    button.textContent = pageNumber;
    button.addEventListener('click', () => goToPage(pageNumber));
    pageNumbersContainer.appendChild(button);
  }

  // 添加省略号
  function addEllipsis() {
    const pageNumbersContainer = document.getElementById('pageNumbers');
    const ellipsis = document.createElement('span');
    ellipsis.className = 'w-10 h-10 flex items-center justify-center text-gray-400';
    ellipsis.textContent = '...';
    pageNumbersContainer.appendChild(ellipsis);
  }

  // 前往指定页
  function goToPage(pageNumber) {
    if (pageNumber !== currentPage) {
      currentPage = pageNumber;
      renderTable();
    }
  }

  // 前往上一页
  function goToPrevPage() {
    if (currentPage > 1) {
      currentPage--;
      renderTable();
    }
  }

  // 前往下一页
  function goToNextPage() {
    const totalPages = Math.ceil(getFilteredStudentsCount() / pageSize);
    if (currentPage < totalPages) {
      currentPage++;
      renderTable();
    }
  }

  // 改变每页显示数量
  function changePageSize() {
    pageSize = parseInt(document.getElementById('pageSizeSelect').value);
    currentPage = 1; // 重置到第一页
    renderTable();
  }

  // 获取过滤后的学生数量
  function getFilteredStudentsCount() {
    return students.filter(student =>
            student.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
            student.studentNo.includes(searchTerm) ||
            student.className.toLowerCase().includes(searchTerm.toLowerCase()) ||
            student.major.toLowerCase().includes(searchTerm.toLowerCase())
    ).length;
  }

  // 处理搜索
  function handleSearch(e) {
    searchTerm = e.target.value.trim();
    currentPage = 1; // 重置到第一页
    renderTable();
  }

  // 处理全选
  function handleSelectAll(e) {
    const isChecked = e.target.checked;
    const filteredStudents = students.filter(student =>
            student.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
            student.studentNo.includes(searchTerm) ||
            student.className.toLowerCase().includes(searchTerm.toLowerCase()) ||
            student.major.toLowerCase().includes(searchTerm.toLowerCase())
    );

    // 计算当前页显示的学生ID
    const startIndex = (currentPage - 1) * pageSize;
    const endIndex = Math.min(startIndex + pageSize, filteredStudents.length);
    const currentPageStudentIds = filteredStudents.slice(startIndex, endIndex).map(student => student.id);

    selectedStudentIds.clear();

    if (isChecked) {
      currentPageStudentIds.forEach(id => selectedStudentIds.add(id));
    }

    renderTable();
  }

  // 处理学生选择
  function handleStudentSelect(e) {
    const studentId = parseInt(e.target.dataset.id);

    if (e.target.checked) {
      selectedStudentIds.add(studentId);
    } else {
      selectedStudentIds.delete(studentId);
    }

    // 更新全选框状态
    updateSelectAllStatus();

    // 更新批量删除按钮状态
    batchDeleteBtn.disabled = selectedStudentIds.size === 0;
  }

  // 更新全选框状态
  function updateSelectAllStatus() {
    const filteredStudents = students.filter(student =>
            student.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
            student.studentNo.includes(searchTerm) ||
            student.className.toLowerCase().includes(searchTerm.toLowerCase()) ||
            student.major.toLowerCase().includes(searchTerm.toLowerCase())
    );

    // 计算当前页显示的学生ID
    const startIndex = (currentPage - 1) * pageSize;
    const endIndex = Math.min(startIndex + pageSize, filteredStudents.length);
    const currentPageStudentIds = filteredStudents.slice(startIndex, endIndex).map(student => student.id);

    // 检查是否所有当前页的学生都被选中
    const allSelected = currentPageStudentIds.every(id => selectedStudentIds.has(id));
    selectAllCheckbox.checked = allSelected;
  }

  // 处理批量删除
  function handleBatchDelete() {
    const ids = Array.from(selectedStudentIds);
    if (ids.length > 0) {
      openDeleteDialog(ids);
    }
  }

  // 打开新增对话框
  function openAddDialog() {
    editingStudentId = null;
    document.getElementById('dialogTitle').textContent = '新增学生';
    document.getElementById('studentForm').reset();
    document.querySelector('input[name="gender"][value="男"]').checked = true;
    openDialog();
  }

  // 打开编辑对话框
  function openEditDialog(studentId) {
    const student = students.find(s => s.id === studentId);
    if (student) {
      editingStudentId = studentId;
      document.getElementById('dialogTitle').textContent = '编辑学生';
      document.getElementById('studentId').value = student.id;
      document.getElementById('studentNo').value = student.studentNo;
      document.getElementById('name').value = student.name;
      document.querySelector(`input[name="gender"][value="${student.gender}"]`).checked = true;
      document.getElementById('age').value = student.age;
      document.getElementById('className').value = student.className;
      document.getElementById('major').value = student.major;
      openDialog();
    }
  }

  // 打开对话框
  function openDialog() {
    studentDialog.classList.remove('hidden');
    // 触发动画
    setTimeout(() => {
      dialogContent.classList.remove('scale-95', 'opacity-0');
      dialogContent.classList.add('scale-100', 'opacity-100');
    }, 10);
  }

  // 关闭对话框
  function closeDialog() {
    dialogContent.classList.remove('scale-100', 'opacity-100');
    dialogContent.classList.add('scale-95', 'opacity-0');
    // 隐藏对话框
    setTimeout(() => {
      studentDialog.classList.add('hidden');
    }, 300);
  }

  // 打开删除对话框
  function openDeleteDialog(ids) {
    deletingStudentIds = ids;

    // 更新删除消息
    const deleteMessage = document.getElementById('deleteMessage');
    if (ids.length === 1) {
      const student = students.find(s => s.id === ids[0]);
      deleteMessage.textContent = `您确定要删除学生【${student?.name}】的信息吗？此操作不可撤销。`;
    } else {
      deleteMessage.textContent = `您确定要删除选中的${ids.length}条学生信息吗？此操作不可撤销。`;
    }

    deleteDialog.classList.remove('hidden');
    // 触发动画
    setTimeout(() => {
      deleteDialogContent.classList.remove('scale-95', 'opacity-0');
      deleteDialogContent.classList.add('scale-100', 'opacity-100');
    }, 10);
  }

  // 关闭删除对话框
  function closeDeleteDialog() {
    deleteDialogContent.classList.remove('scale-100', 'opacity-100');
    deleteDialogContent.classList.add('scale-95', 'opacity-0');
    // 隐藏对话框
    setTimeout(() => {
      deleteDialog.classList.add('hidden');
    }, 300);
  }

  // 保存学生信息
  function saveStudent() {
    // 获取表单数据
    const studentNo = document.getElementById('studentNo').value.trim();
    const name = document.getElementById('name').value.trim();
    const gender = document.querySelector('input[name="gender"]:checked').value;
    const age = parseInt(document.getElementById('age').value);
    const className = document.getElementById('className').value.trim();
    const major = document.getElementById('major').value;

    // 简单验证
    if (!studentNo || !name || !age || !className || !major) {
      showToast('请填写完整信息', 'error');
      return;
    }

    if (editingStudentId === null) {
      // 新增学生
      const newId = students.length > 0 ? Math.max(...students.map(s => s.id)) + 1 : 1;
      const newStudent = {
        id: newId,
        studentNo,
        name,
        gender,
        age,
        className,
        major
      };
      students.push(newStudent);
      showToast('学生信息添加成功');
    } else {
      // 编辑学生
      const index = students.findIndex(s => s.id === editingStudentId);
      if (index !== -1) {
        students[index] = {
          ...students[index],
          studentNo,
          name,
          gender,
          age,
          className,
          major
        };
        showToast('学生信息更新成功');
      }
    }

    closeDialog();
    renderTable();
  }

  // 确认删除
  function confirmDelete() {
    // 过滤掉要删除的学生
    students = students.filter(student => !deletingStudentIds.includes(student.id));

    // 清除选中状态
    deletingStudentIds.forEach(id => selectedStudentIds.delete(id));

    closeDeleteDialog();
    showToast(deletingStudentIds.length === 1 ? '学生信息已删除' : `已删除${deletingStudentIds.length}条学生信息`);
    renderTable();
  }

  // 显示提示消息
  function showToast(message, type = 'success') {
    toastMessage.textContent = message;

    // 设置图标和样式
    if (type === 'success') {
      toastIcon.className = 'fa fa-check-circle text-xl text-secondary';
      toast.className = 'fixed top-4 right-4 px-6 py-3 bg-secondary/10 text-secondary border border-secondary/30 rounded-lg shadow-xl transform translate-x-full transition-transform duration-300 flex items-center gap-3 z-50';
    } else if (type === 'error') {
      toastIcon.className = 'fa fa-exclamation-circle text-xl text-red-400';
      toast.className = 'fixed top-4 right-4 px-6 py-3 bg-red-500/10 text-red-400 border border-red-500/30 rounded-lg shadow-xl transform translate-x-full transition-transform duration-300 flex items-center gap-3 z-50';
    }

    // 显示提示
    setTimeout(() => {
      toast.classList.remove('translate-x-full');
    }, 10);

    // 3秒后隐藏提示
    setTimeout(() => {
      toast.classList.add('translate-x-full');
    }, 3000);
  }

  // 初始化
  document.addEventListener('DOMContentLoaded', init);
</script>
</body>
</html>
